<template>
  <PageWrapper dense>
    <CollapseContainer title="印刷">
      <BasicForm @register="registerForm">
        <!-- 印刷尺寸 -->
        <template #spuSize1>
          <Space>
            <a-input v-model:value="state.spuExtraInfo.skuPrintLength" style="width: 250px;">
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.skuPrintLengthUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
            <a-divider type="vertical">X</a-divider>
            <a-input v-model:value="state.spuExtraInfo.skuPrintWidth" style="width: 250px;">
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.skuPrintWidthUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
          </Space>
        </template>
        <!-- 印刷尺寸2 -->
        <template #spuSize2>
          <Space>
            <a-input v-model:value="state.spuExtraInfo.skuPrintLength2" style="width: 250px;">
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.skuPrintLengthUnit2" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
            <a-divider type="vertical">X</a-divider>
            <a-input v-model:value="state.spuExtraInfo.skuPrintWidth2" style="width: 250px;">
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.skuPrintWidthUnit2" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
          </Space>
        </template>
      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>

<script setup lang="ts">
import { BasicForm, useForm } from '@/components/Form';
import { reactive } from 'vue';
import { drawerSchemas1 } from '../product.data';
import { Select, Space } from 'ant-design-vue';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { DictEnum } from '@/enums/dictEnum';
import { getDictOptions } from '@/utils/dict';
defineOptions({ name: 'printEdit' });
const SelectOption = Select.Option;
const [registerForm, { setFieldsValue, validate }] = useForm({
  // layout: 'vertical',
  labelWidth: 100,
  name: 'user-drawer',
  showActionButtonGroup: false,
  baseColProps: { span: 12 },
  schemas: drawerSchemas1,
});
const state = reactive({
  spuExtraInfo: {
    skuPrintLength: '',
    skuPrintLengthUnit: '',
    skuPrintWidth: '',
    skuPrintWidthUnit: '',
    skuPrintLength2: '',
    skuPrintLengthUnit2: '',
    skuPrintWidth2: '',
    skuPrintWidthUnit2: '',
  }
});
async function handleSubmit() {
  try {
    const data = {
      ...(await validate()),
      ...state.spuExtraInfo,
    };
    return data
  } catch (e) {
    console.log('e', e);
  } finally {
  }
}
const setFormData = (data: any) => {
  // data.spuTypeId = data.spuTypeId ? data.spuTypeId.toString() : '';
  // data.topicId = data.topicId ? data.topicId.toString() : '';
  setFieldsValue(data);
  state.spuExtraInfo = {
    skuPrintLength: data.skuPrintLength || '',
    skuPrintLengthUnit: data.skuPrintLengthUnit || '',
    skuPrintWidth: data.skuPrintWidth || '',
    skuPrintWidthUnit: data.skuPrintWidthUnit || '',
    skuPrintLength2: data.skuPrintLength2 || '',
    skuPrintLengthUnit2: data.skuPrintLengthUnit2 || '',
    skuPrintWidth2: data.skuPrintWidth2 || '',
    skuPrintWidthUnit2: data.skuPrintWidthUnit2 || '',
  };
};
defineExpose({ handleSubmit, setFormData });
</script>
